<template>
  <div class="Seat" style="padding-bottom:70px">
    <x-header :left-options="{backText: '',preventGoBack:true}">预约订座</x-header>
    <div style="padding:38px 6px 0 6px">
      <div>
        <cell
          :title="selectShop.name"
          is-link
          :border-intent="false"
          :arrow-direction="showContent ? 'up' : 'down'"
          @click.native="showContent = !showContent" class="headertitle"></cell>

        <div class="slide" :class="showContent?'animate':''">

          <group>
            <!--<radio title="type" :selected-label-style="{background: '#1AAD19',color:'#fff',display:'block'}" v-model="selectShop"-->
            <!--@on-change="showContent = !showContent"-->
            <!--:options="shopList"></radio>-->
            <div v-for="(item,index) in shopList"
                 :style="{background:selectkey===index?'#1AAD19':'',color:selectkey===index?'#fff':'#989898'}"
                 class="shopname"
                 @click="selectvalue(index,item)">
              <div style="flex: 3">{{item.name}}</div>
              <div style="width:70px;text-align: right">{{item.distance}}km</div>
            </div>

          </group>
        </div>
      </div>
      <div>
        <tab :line-width="0">
          <tab-item v-for="(item,index) in formatTime" :key="index" :selected="selected===index"
                    @on-item-click="onItemClick" style="line-height: 20px;padding: 2px 0">
            <p style="font-size: 13px">{{item.today}}{{item.time}}</p>
            <p style="font-size: 10px">{{item.week}}</p>
          </tab-item>
        </tab>
      </div>
      <div style="font-size: 10px;color: #000;padding: 10px 12px;background: #fff;display: flex;margin-top: 4px">
        <div style="flex: 1;white-space:nowrap;text-align: center;position: relative"
             v-for="(item,index) in listoptions"
             :key="index">
          <img :src="item.url" style="width: 15px;position: absolute;left: 15px;" alt="">
          <span style="padding: 0 0 0 15px;color: #666666">{{item.name}}</span>
        </div>
      </div>
      <div style="padding: 0 2px;display: flex;text-align: center;background: #fff;overflow: hidden;height: 300px">
        <!--<SeatList/>-->
        <SeatListY v-if="selectShop.id==1&&seatList.length>0" :seatList="seatList" :GetSeatList="GetSeatList"/>
        <SeatListH v-if="selectShop.id==2&&seatList.length>0" :seatList="seatList" :GetSeatList="GetSeatList"/>
      </div>
      <div style="padding: 8px 6px;display: flex;flex-wrap:wrap;background: #fff">
        <div class="seat_info" v-for="_item in CheckSeatList">
          {{_item.name}}
          <x-icon type="ios-close-empty" class="iconclose" size="16" @click="DelSeat(_item)"></x-icon>
        </div>
      </div>
    </div>
    <!--<div style="font-size: 12px;color: #808080;padding-left: 12px">*左右滑动座位图查看更多</div>-->
    <x-button type="primary" class="saveinfo" @click.native="sureSeat">确认订座</x-button>
    <div style="text-align: center;padding: 20px 0">
      <img src="static/icon/home_icon_nav@3x.png" style="width:110px;" alt="" @click="maptu">
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import {Cell, CellBox, Group, Radio, XHeader, XButton, Tab, TabItem} from 'vux'
  import wx from 'weixin-js-sdk'
  import {mapState} from 'vuex'
  import {fmtDate, formatDate, getWeek} from '@/utils/utils'
  import SeatListH from './SeatListH'
  import SeatListY from './SeatListY'
  import {BookList, wxAdmin, GetSeat, PreCheck, UserInfo, Login} from '../../api/mine'

  export default {
    data () {
      return {
        selectShop: {},
        selectkey: 0,
        shopList: [],
        showContent: false,
        RoundSeatNum: [1, 2],
        SquareSeatNum: [1],
        listoptions: [
          {
            url: 'static/icon/30.png',
            name: '使用中'
          }, {
            url: 'static/icon/20.png',
            name: '已预订'
          }, {
            url: 'static/icon/10.png',
            name: '可选择'
          }, {
            url: 'static/icon/40.png',
            name: '已选中'
          }
        ],
        selected: 1,
        formatTime: [{
          today: '今天',
          time: formatDate(new Date()),
          week: getWeek(fmtDate(new Date())),
          alltime: fmtDate(new Date())
        }, {
          today: '明天',
          time: formatDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)),
          week: getWeek(fmtDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000))),
          alltime: fmtDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000))
        }, {
          today: '后天',
          time: formatDate(new Date(new Date().getTime() + 48 * 60 * 60 * 1000)),
          week: getWeek(fmtDate(new Date(new Date().getTime() + 48 * 60 * 60 * 1000))),
          alltime: fmtDate(new Date(new Date().getTime() + 48 * 60 * 60 * 1000))
        }],
        // seattype: ['连排1号', '连排2号', '连排1号', '连排2号', '连排3号', '连排1号', '连排2号', '连排3号'],
        GetSeatList: [],
        seatList: [],
        User: {}
      }
    },
    created () {
      this.$store.dispatch('DEL_ALL_SEAT', {CheckSeatList: []})
      this.init()
      // UserInfo().then(res => {
      //   this.User = res.data.data
      // })

    },
    methods: {
      maptu () {
        let _this = this
        wxAdmin({
          url: window.location.href.split('#')[0]
        }).then(res => {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.data.signature, // 必填，签名，见附录1
            jsApiList: [
              'checkJsApi',
              'chooseWXPay',
              'getLocation',
              'scanQRCode',
              'openLocation',
              'translateVoice'
            ],
          })
          //微信地理位置功能
          wx.ready(() => {
            wx.openLocation({
              latitude: _this.selectShop.lat, // 纬度，浮点数，范围为90 ~ -90
              longitude: _this.selectShop.lon, // 经度，浮点数，范围为180 ~ -180。
              name: _this.selectShop.name, // 位置名
              address: this.selectShop.address, // 地址详情说明
              scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
            })
          })
        })
      },
      sureSeat () {
        let _this = this
        if (_this.CheckSeatList.length === 0) {
          Vue.$vux.confirm.show({
            content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
          <p>请先选择座位</p>`,
            showCancelButton: false,
            onConfirm () {
            }
          })
          return
        }
        Vue.$vux.loading.show({
          text: '正在查询座位信息...'
        })
        let CheckSeatList = []
        _this.CheckSeatList.map(t => {
          CheckSeatList.push(t.id)
        })
        PreCheck({
          seatIds: CheckSeatList,
          shopId: _this.selectShop.id
        }).then(res => {
          console.log(res.data.status)
          Vue.$vux.loading.hide()
          if (res.data.status == 'success') {

            if (res.data.data.code === 'success') {
              _this.$router.push({
                name: 'ConfirmSeat',
                query: {
                  shop: JSON.stringify(_this.selectShop),
                  time: this.formatTime[this.selected].alltime
                }
              })
            } else {
              if (res.data.data.code === 'balance_not_enough') {
                Vue.$vux.confirm.show({
                  content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
          <p>${res.data.data.msg}</p>`,
                  showCancelButton: false,
                  onConfirm () {
                    _this.$router.push({
                      path: '/Mine/Recharge'
                    })
                  }
                })
              } else {
                Vue.$vux.confirm.show({
                  content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
          <p>${res.data.data.msg}</p>`,
                  showCancelButton: false,
                  onConfirm () {
                  }
                })
              }

              //     if (_this.User.balance < 30) {
              //       Vue.$vux.confirm.show({
              //         content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
              // <p>余额不足，请先充值</p>`,
              //         showCancelButton: false,
              //         onConfirm () {
              //           _this.$router.push({
              //             path: '/Mine/Recharge'
              //           })
              //         }
              //       })
              //       return
              //     }
            }

          } else {
            Vue.$vux.confirm.show({
              content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
          <p>${res.data.msg}</p>`,
              showCancelButton: false,
              onConfirm () {
              }
            })
          }
        })

      },
      DelSeat (item) {
        let seatList = this.seatList
        let GetSeatList = this.GetSeatList
        seatList.map(t => {
          if (item.id == t.id) {
            GetSeatList.map(s => {
              if (item.id == s.id) {
                item.status = s.status
              }
            })
          }
        })
        this.$store.dispatch('DEL_SEAT', {
          CheckSeatList: item
        })
        this.seatList = seatList
      },
      selectvalue (n, item) {//店铺选择
        this.selectkey = n
        this.selectShop = item
        this.showContent = !this.showContent
        this.$store.dispatch('DEL_ALL_SEAT', {CheckSeatList: []})
        this.seatList = []
        this.init()
      },
      onItemClick (num) {//时间选择
        this.selected = num
        this.$store.dispatch('selectTime', {selectTime: this.formatTime[num].alltime})
        this.$store.dispatch('DEL_ALL_SEAT', {CheckSeatList: []})
        this.seatList = []
        this.init()
      },
      init () {
        let _this = this
        // GetSeat({
        //   shopId: 1,// _this.selectShop.id,
        //   day: _this.formatTime[_this.selected].alltime
        // }).then(res => {
        //   if (res.data.status === 'success') {
        //     _this.seatList = res.data.data
        //   }
        // })
        // return
        setTimeout(() => {
          Vue.$vux.loading.show({
            text: '正在加载座位图'
          })
        }, 1000)
        wxAdmin({
          url: window.location.href.split('#')[0]
        }).then(res => {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.data.signature, // 必填，签名，见附录1
            jsApiList: [
              'checkJsApi',
              'chooseWXPay',
              'getLocation',
              'scanQRCode',
              'translateVoice'
            ],
          })
          debugger
          //微信地理位置功能
          wx.ready(() => {
            wx.getLocation({
              type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
              success: function (re) {
                let latitude = re.latitude // 纬度，浮点数，范围为90 ~ -90
                let longitude = re.longitude // 经度，浮点数，范围为180 ~ -180。
                let speed = re.speed // 速度，以米/每秒计
                let accuracy = re.accuracy // 位置精度
                debugger
                BookList({
                  'lon': longitude,
                  'lat': latitude
                }).then(r => {
                  _this.shopList = r.data.data
                  _this.selectShop = r.data.data[_this.selectkey]
                  GetSeat({
                    shopId: _this.selectShop.seatLayout == 'layout01' ? 1 : 2,
                    day: _this.formatTime[_this.selected].alltime
                  }).then(res => {
                    console.log(res.data)
                    if (res.data.status === 'success') {
                      _this.GetSeatList = JSON.parse(JSON.stringify(res.data.data))//深拷贝
                      let seatList = res.data.data
                      if (_this.CheckSeatList.length > 0) {
                        seatList.map(a => {
                          _this.CheckSeatList.map(b => {
                            if (b.id == a.id) {
                              a.status = 4
                            }
                          })
                        })
                      }
                      _this.seatList = seatList
                    }
                  })
                })
              }
            })
          })
        })
      },
    },
    computed: {
      ...mapState({
        CheckSeatList: state => state.CheckSeatList
      })
    },
    components: {
      Cell,
      CellBox,
      Group,
      Radio,
      XHeader,
      XButton,
      Tab,
      TabItem,
      SeatListH,
      SeatListY
    }
  }
</script>

<style scoped>
  .Seat /deep/ .vux-tab-container {
    height: 45px;
  }

  .Seat /deep/ .shopname {
    height: 36px;
    line-height: 36px;
    color: #000;
    background: #fff;
    text-align: left;
    margin-bottom: 3px;
    font-size: 12px;
    padding: 0 12px;
    display: flex;
  }

  .Seat /deep/ .seat_info {
    font-size: 12px;
    padding: 2px 14px;
    width: 60px;
    margin: 4px;
    border: 1px #F8FAF9 solid;
    border-radius: 3px;
    text-align: center;
    box-shadow: 0px -2px 0px 0px #F8FAF9,
    -2px 0px 0px 0px #F8FAF9,
    2px 0px 0px 0px #F8FAF9,
    0px 2px 0px 0px #F8FAF9;
    position: relative;
    color: #666666;
  }

  .Seat /deep/ .iconclose {
    position: absolute;
    right: 3px;
    top: 0;
  }

  .Seat /deep/ .shopname:first-child {
    margin-top: 10px
  }

  .Seat /deep/ .weui-cell:before {
    border: none !important;
  }

  /*.Seat /deep/ .weui-cell__ft {*/
  /*display: none;*/
  /*}*/

  .Seat /deep/ .weui-cells:before {
    border: none !important;
  }

  .Seat /deep/ .weui-cells:after {
    border: none !important;
  }

  .Seat /deep/ .vux-tab {
    border-radius: 5px 5px 0 0;
    overflow: hidden;
  }

  .Seat /deep/ .vux-tab-item {
    background: #fff;
  }

  .Seat /deep/ .vux-tab-selected {
    background: #1AAD19;
    color: #fff !important;
    font-size: 14px;
  }

  .Seat /deep/ .vux-header {
    background: #fff;
    position: fixed;
    z-index: 10;
    width: 100%;
    top: 0;
    padding: 0;
  }

  .Seat /deep/ .saveinfo {
    width: calc(100% - 15px);
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    margin-top: 24px;
    color: #fff;
    border-radius: 42px;
    background-color: #1AAD19;
  }

  .Seat /deep/ .vux-header .vux-header-title {
    color: #000;
    font-size: 16px;
    font-weight: 600;
  }

  .Seat /deep/ .vux-header .vux-header-left {
    display: none;
  }

  .Seat /deep/ .slide {
    overflow: hidden;
    max-height: 0;
    background: #F8FAF9;
    transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
    position: absolute;
    width: calc(100% - 12px);
    z-index: 11111;
  }

  .Seat /deep/ .headertitle {
    font-size: 12px;
  }

  .Seat /deep/ .animate {
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
    transition-delay: 0s;
  }

  .Seat /deep/ .vux-no-group-title {
    font-size: 14px;
  }

  .Seat /deep/ .weui-cell {
    padding: 3px 12px;
    line-height: 32px;
    background: #fff;
    margin: 5px 0;
    border-radius: 5px;
    height: 36px;
  }

  .Seat /deep/ .vux-no-group-title {
    margin-top: -10px;
    background-color: #F8FAF9;
  }

  .Seat /deep/ .vux-cell-primary {
    width: 80%;
  }

  .Seat /deep/ .vux-cell-primary p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
  }

  .Seat /deep/ .weui-cell__bd {
    width: 80%;
  }

  .Seat /deep/ .weui-cell__bd p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }

</style>
